<template>
  <div>
    <button @click="genPoints">生成二维码</button>
    <button @click="saveImg">保存图片</button>
    <div id="codeC" style="">
      <canvas
        id="qrcodeCanvas"
        width="1280"
        height="600"
        style="border: 1px solid #ccc;background-color: rgb(38, 124, 204);"
      ></canvas>
    </div>
  </div>
</template>

<script>
var canvas;
var setImageWidth = 100;
var width = 30;
import AX from "../service/Server.js";
import html2Canvas from "html2canvas";
import QRCode from "qrcode";

let genId = function (i) {  
  if(i<10) {return '0000' + i}
  else if(i<100) {return '000' + i}
  else if(i<1000) {return '00' + i}
  else if(i<10000) {return '0' + i}
  else {return i}
}
export default {
  props: ["points","robots"],
  components: {},
  data() {
    return {
      posterOnoff: false,
      posterImg: "",
      codeImgUrl: "",
      headImg: "",
      charData: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    async genPoints() {
      let items = this.points;

      // for (let i = 0; i < items.length; i++) {
      //   const point = items[i];
      //   // let dataURL = await this.toCode(point.id);

      //   let urlPrefix = "/static/img/tagCircle49h12/"
      //   let dataURL = urlPrefix + "tag49_12_" + genId(i) + ".png"
      //   fabric.Image.fromURL(dataURL, function (img) {
      //     img.set({
      //       selectable: false,
      //       width: setImageWidth,
      //       height: setImageWidth,
      //       // scaleX: width / setImageWidth,
      //       // scaleY: width / setImageWidth,
      //       left: point.left,
      //       top: point.top,
      //     });
      //     img.scale(3);
      //     canvas.add(img);
      //   });
      // }
    },
    async toCode(id) {
      // 生成 二维码的方法
      return new Promise((resolve, reject) => {
        let canvas = document.createElement("canvas");
        canvas.width = setImageWidth;
        canvas.height = setImageWidth;
        QRCode.toCanvas(canvas, id, (error) => {
          if (error) {
            console.log(error);
          } else {
            let data = canvas.toDataURL("image/jpeg");
            resolve(data);
          }
        });
      });
    },
    async saveImg() {
      let that = this;
      //   let c = document.getElementById("qrcodeCanvas");
      //   console.log("export image", qrcodeCanvas);
      //   window.open(c.toDataURL("png"));
      let save2 = document.getElementById("qrcodeCanvas");
      html2Canvas(save2).then(async function (c) {
        // document.body.appendChild(c);
        // window.open( c.toDataURL("image/png"))
        function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","); //分割为数组，分割到第一个逗号
          let bstr = window.atob(arr[1]);
          let n = bstr.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: "png" });
        }
        let world_name = "test";
        let dataURL = c.toDataURL("image/png"); //base64格式的图片 url
        let points = that.points;
        let robots = that.robots;
        let res = await AX.genSimulation({
          world_name,
          dataURL,
          points,
          robots,
          width: 12.8,
          height: 6,
        });
        // const blobUrl = dataURLtoBlob(dataURL); //转化成blob格式的图片 Blob{size:xx,type:xx}
        // var fileUrl = URL.createObjectURL(blobUrl); //URL.createObjectURL()创建一个指向File或Blob对象的URL。这个URL可以被用于指定一个HTML标签的href属性

        // // 创建a标签下载图片
        // var addElement = document.createElement("a");
        // addElement.href = fileUrl;
        // addElement.download = "下载.png";

        // document.body.appendChild(addElement);
        // addElement.click();
        // document.body.removeChild(addElement);
      });
    },
  },
  created() {},
  mounted() {
    canvas = new fabric.Canvas("qrcodeCanvas");
  },
};
</script>

<style >
</style>